<template>
  <div style="margin-top:10px;">
    <grid :items="items" :onClick="onClickGrid"></grid>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import grid from '@/components/modules/grid';
import fetch from '@/libs/fetch';
import utils from '@/libs/utils';

export default {
  data(){
    return {
      items: []
    }
  },
  components:{
    grid
  },
  methods: {
    onClickGrid(item, index){
      // console.log('grid click',item, index);
      // let reg = /^http[s]?:\/\//;
      // if(reg.test(item.path)){
      //   this.$router.push({path: `/modules/iframe/${item.name}/${index}`});
      // } else {
      //   this.$router.push({path: item.path});
      // }
      this.$router.push({path: `/modules/iframe/${item.name}/${index}`});
    },
    fetchData(){
      fetch.get({
        url: '/getChaJianList',
        success: (res) => {
          console.log('chajian', res);
          if(res.data.code === 0){
            this.items = this.fmtData(res.data.data);
            console.log(this.items);
            this.$store.commit('setChajian', this.items);
          }
        }
      })
    },
    fmtData(data){
      if(!data){
        data = [];
      }
      console.log('a',data);
      let itemList = [];
      for(let i = 0; i < data.length; i++){
        itemList.push({
          name: data[i].apkName,
          icon: utils.getHost() + data[i].pictureName,
          path: data[i].href
        })
      }
      console.log(itemList);
      return itemList;
    }
  },
  mounted(){
    if(this.getChajian.length){
      this.items = this.getChajian;
    }else{
      this.fetchData();
    }
  },
  computed:{
    ...mapGetters([
      'getChajian'
    ])
  }
}
</script>
